'use strict';
import React, {
    Component,
    PropTypes
} from 'react';
import ReactDOM, {
    render
} from 'react-dom';

import {
    HttpService,
    Toast,
    GetCurrentDate
} from '../Http';
import {
    Tool
} from '../utils';
import {
    goJxtFn,
    isIphone4,
    newsStatus,
    goJxtUrl,
    integralSwitch,
    imgOnError
} from '../Tool';

import {
    change,
    getOneBabyid,
    changeSaveBabyStatus,
    getCurrentPower,
    exportMap
} from '../action/index'

import {
    connect
} from 'react-redux';
import {
    bindActionCreators
} from 'redux';

import Link from './common/Link'
import News from './News'


import usrimg from '../img/user.png'

import qiehuan from '../img/qiehuan.png'

import dian2 from '../img/dianliang1.png'
import dian3 from '../img/dianliang2.png'
import dian4 from '../img/dianliang3.png'
import dian1 from '../img/didianliang.png'
import dian from '../img/dianliang0.png'
import imgGuaShi from '../img/icon/guashi.png'

import lishiguiji from '../img/lishigj2.png'
import banji from '../img/banji.png'

import wifi from '../img/icon/wifi.png'
import lbs from '../img/icon/lbs.png'
import gbs from '../img/icon/gps.png'

import touxiang from '../img/touxiang.png'

import shouqi from '../img/shouqi.png'

import dingweixiao from '../img/dingweixiao.png'
import dingwei from '../img/dingwei.png'
import tongzhi from '../img/jianhuchengyuan.png'
import anquan from '../img/anquan.png'

import tonghuaxiao from '../img/tonghuaxiao.png'
import downa from '../img/downa.png'

import zhankai from '../img/zhankai.png'
import zixun from '../img/zixun.png'
import kuaile from '../img/kuaile.png'

import tonghua from '../img/tonghua.png'


import more from '../img/more.png'

import guanbi from '../img/guanbi.png'

import header from '../img/login/header.jpg'
import footer from '../img/login/footer.jpg'

import jianhuchengyuan from '../img/jianhuchengyuan.png'

import genghuan from '../img/genghuan.png'

import jiebang from '../img/jiebang.png'

import kaoqin from '../img/kaoqin.png'
import imgKan from '../img/kan.png'

import Model from './common/model'

class MapIndex extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    static defaultProps = {
        authstatus: 'li'
    };
    constructor(props) {
        super(props);
        this.state = {
            lng: '120.153576',
            lat: '30.287459',
            isOpen: false,
            mapHeight: '100%',
            mapBottom: '4.5rem',
            checked: false,
            babyname: '',
            babyid: '',
            jxtBabyId: '',
            deviceType: '',
            model: {},
            babyInfo: {},
            is: false,
            getThirdPartyFlag: false,
            isReceiveProps: false,
            integral: localStorage.integral == 'true',
            confrmtatus: 0
        };
        this.confrmtatusTxt = 1;
        this.DidMount = false;
        this.shiming = '';
        this.modelConfigBabyNone = {
            model_content_contnet: true,
            header: <div className="header">
                <img src={header} className="app-all-img"/>
            </div>,
            content: localStorage.newlink ?
                <div className="content app-padding-lr20">
                    <div className="_header app-active-font32">无智能学生提醒</div>
                    <div className="_content step app-666-font24" style={{height:'4rem'}}>
                        <div>对不起，本活动仅限智能学生证用户参与！</div>
                    </div>
                    <div className="_footer step">
                        <div className="s-center app-active-font32" style={{color: '#666'}} onClick={this.goHome.bind(this)} >我知道了</div>
                        <Link className="s-center app-active-font32" to='/BuyDevice/true'>立即购买</Link>
                    </div>
                </div> : <div className="content">
                    <div className="_header"></div>
                    <div className="_content">无设备提醒</div>
                    <Link to='/addDevice'>
                        <div className="_footer app-active-font32">去添加</div>
                    </Link>
                </div>,
            footer: <div className="footer">
                    <img src={footer} className="app-all-img"/>
                </div>

        };

        this.modelConfigBabyState0 = {
            model_content_contnet: true,
            header: <div className="header">
                <img src={header} className="app-all-img"/>
            </div>,
            content: <div className="content app-padding-lr20">
                <div className="_header app-active-font32">
                    未实名认证
                </div>
                <div className="_content step app-666-font24" style={{
                    flexDirection: 'column'
                }}>
                    <div>尊敬的学生家长</div>
                    <div>根据国家工信部电话实名制要求，为保证智能学生证正常使用，请根据提示即时进行认证！为此给您带来的不便敬请谅解，感谢您的支持！</div>
                </div>
                <div className="_footer step">
                    <div className="s-flex1 s-j-end app-666-font32" onClick={this.no.bind(this)}>下次提醒</div>
                    <div className="app-padding-lr50"></div>
                    <div className="s-flex1 app-active-font32" onClick={this.authen.bind(this)}>去认证</div>
                </div>
            </div>,
            footer: <div className="footer">
                    <img src={footer} className="app-all-img"/>
                </div>
        };

        this.modelConfigBabyState1 = {
            model_content_contnet: true,
            header: <div className="header">
                <img src={header} className="app-all-img"/>
            </div>,
            content: <div className="content app-padding-lr20">
                <div className="_header app-active-font32">
                    实名认证中
                </div>
                <div className="_content step app-666-font24" style={{
                    flexDirection: 'column'
                }}>
                    <div>部分功能仅在实名认证通过后才可使用，认证时间在1个工作日内，请耐心等待。如有疑问请联系客服：<a style={{color:'inherit'}} href='tel:4008273366'>400-827-3366</a></div>
                </div>
                <div className="_footer step">
                    <div className="s-center app-active-font32" onClick={this.no1.bind(this)}>我知道了</div>
                </div>
            </div>,
            footer: <div className="footer">
                    <img src={footer} className="app-all-img"/>
                </div>
        };

        this.modelConfigBabyState2 = {
            model_content_contnet: true,
            header: <div className="header">
                <img src={header} className="app-all-img"/>
            </div>,
            content: <div className="content app-padding-lr20">
                <div className="_header app-hong-font32">
                    实名认证未通过
                </div>
                <div className="_content step app-666-font24" style={{
                    flexDirection: 'column'
                }}>
                    <div>姓名和身份证不匹配，身份证正面照片不合格，身份证反面照片不合格</div>
                </div>
                <div className="_footer step">
                    <div className="s-flex1 s-j-end app-666-font32" onClick={this.no2.bind(this)}>下次提醒</div>
                    <div className="app-padding-lr50"></div>
                    <div className="s-flex1 app-active-font32" onClick={this.authen.bind(this)}>去认证</div>
                </div>
            </div>,
            footer: <div className="footer">
                    <img src={footer} className="app-all-img"/>
                </div>
        }
        this.modelConfigBabyState3 = {
            model_content_contnet: true,
            header: <div className="header">
                <img src={header} className="app-all-img"/>
            </div>,
            content: <div className="content app-padding-lr20">

                <div className="_header app-active-font32">
                    管理员未实名认证
                </div>
                <div className="_content step app-666-font24" style={{
                    flexDirection: 'column'
                }}>
                    <div>因设备逾期未进行实名认证，现已无法正常使用，请联系设备管理员进行实名认证</div>
                </div>
                <div className="_footer step">
                    <div className="s-center app-active-font32" onClick={this.no3.bind(this)}>我知道了</div>
                </div>
            </div>,
            footer: <div className="footer">
                    <img src={footer} className="app-all-img"/>
                </div>
        }
        this.modelConfigBabyState4 = {
            model_content_contnet: true,
            header: <div className="header">
                <img src={header} className="app-all-img"/>
            </div>,
            content: <div className="content app-padding-lr20">

                <div className="_header app-active-font32">
                    APP实名认证
                </div>
                <div className="_content step app-666-font24" style={{
                    flexDirection: 'column'
                }}>
                    <div>尊敬的学生家长</div>
                    <div>根据国家工信部电话实名制要求，为保证智能学生证正常使用，请下载APP进行实名认证！</div>
                </div>
                <div className="_footer step">
                    <div className="s-flex1 s-j-end app-666-font32" onClick={this.no4.bind(this)}>下次提醒</div>
                    <div className="app-padding-lr50"></div>
                    <div className="s-flex1 app-active-font32" onClick={this.appDown.bind(this)}>下载APP</div>
                </div>
            </div>,
            footer: <div className="footer">
                    <img src={footer} className="app-all-img"/>
                </div>
        }
        //功能限制提示:
        //该功能仅在实名认证通过后才可使用，认证时间在1个工作日内，请耐心等待。如有疑问请联系客服：400-827-3366
    }
    //关闭提示框
    no() {
        this.setState({
            model: Tool.assign({}, this.state.model, {
                flag: false
            })
        })
    }
    //关闭提示框
    no1() {
        this.setState({
            model: Tool.assign({}, this.state.model, {
                flag1: false
            })
        })
    }
    //关闭提示框
    no2() {
        this.setState({
            model: Tool.assign({}, this.state.model, {
                flag2: false
            })
        })
    }
    //关闭提示框
    no3() {
        this.setState({
            model: Tool.assign({}, this.state.model, {
                flag3: false
            })
        })
    }
    //关闭提示框
    no4() {
        this.setState({
            model: Tool.assign({}, this.state.model, {
                flag4: false
            })
        })
    }
    //实名认证处理
    authen() {
        this.context.router.push('/authen/' + this.state.babyInfo.telephone)
    }
    //下载APP处理
    appDown() {
        localStorage.appdown = 1;
        this.leaveLocation('http://www.17find.com/download/?from=weixin02')
    }
    //关闭过期提示
    closeTime() {
        this.setState({
            confrmtatus: 0
        });
    }
    //过期提示判断，认证判断，无设备ID判断
    packageExpired(url, url2, e) {
        //过期：1
        //未绑：2
        //挂失：3
        if (this.state.babyInfo.loststatus == 1 || !this.state.babyInfo.deviceid) {
            e.preventDefault();
            this.confrmtatusTxt = this.state.babyInfo.loststatus == 1 ? 3 : 2;
            this.setState({
                confrmtatus: 1
            });
            return;
        }
        if (url == 'Kaoqin') { //考勤功能只判断 无设备ID
            this.context.router.push(url2);
            return;
        }
        if (this.state.babyInfo.deviceType == 3) {
            e.preventDefault();
            this.context.router.push(url);
            return;
        }
        if (this.authstatusTip(this.state.babyInfo, 1) == 1) {
            e.preventDefault();
            return;
        }
        this.confrmtatusTxt = 1;
        let nowTime = new Date();
        let month = nowTime.getMonth() + 1;
        if (month < 10)
            month = '0' + month;
        nowTime = new Date(nowTime.getFullYear() + '/' + month + '/' + nowTime.getDate())
        let getTime = new Date(this.state.babyInfo.endTime);
        if ((nowTime.getTime() - getTime.getTime()) / 1000 > 0) {
            this.setState({
                confrmtatus: 1
            });
            if (url2 == 'tel') {
                e.preventDefault();
            }
        } else {
            if (url2 == 'tel') {
                return;
            }
            if (url2 == 'getLocation') { //定位处理
                const url = '/mapDetail/' + this.props.babyid + '/' + encodeURIComponent(this.props.babyname) + '/' + encodeURIComponent('/media' + this.props.headimg)
                this.context.router.push(url);
                return;
            }
            this.context.router.push(url2);
        }
    }

    //设备切换处理
    _change(babyname, babyid, jxtBabyId, deviceid, deviceType, authstatus, loststatus, headimg, babytelephone, acindex, e) {
        if (localStorage.newlink) {
            if (deviceType != 2) {
                Toast.toast('智能学生才能缴费')
            } else {
                if (localStorage.newlink == 'pay') {
                    localStorage.acindex = acindex
                    this.context.router.push(`/pay/${babyid}/${deviceid}`)
                }
            }
            return
        }

        if (document.querySelector('.tips')) {
            document.querySelector('.tips').style.display = 'none';
        }
        localStorage.is = 0;
        e.preventDefault();
        e.currentTarget.className = 'devactive device-info';
        this.setState({
            checked: false,
            deviceType: deviceType
        });
        localStorage.babyid = babyid;
        const data = {
            babyname,
            authstatus,
            loststatus,
            babyid,
            jxtBabyId,
            deviceid,
            babytelephone,
            headimg,
            deviceType,
            acindex
        };
        this.props.change(data);
        this.getBaby(babyid);
        _hmt.push(['_trackEvent', 'page', 'map', '切换设备']);
    }

    //去首页
    goHome() {
        if (/micromessenger/.test(navigator.userAgent.toLowerCase())) {
            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx85577a457cfcd222&redirect_uri=http%3A%2F%2Fwx.17find.com%2F&response_type=code&scope=snsapi_userinfo&state=guardian#wechat_redirect'
        } else {
            location.href = 'http://wx.17find.com'
        }
    }

    //设备列表显示
    getdevList() {
        this.setState({
            checked: true
        })
    }
    //设备列表关闭
    closedevList() {
        this.setState({
            checked: false
        })
    }
    //保存设备设置的角色
    changeAge(f) {
        HttpService.query({
            url: '/app/object/modifyBabyInfo',
            data: {
                familystatus: f,
                babyid: this.props.babyid,
                token: localStorage.appToken,
                weixinclient: 'true'
            },
            success: (res => {
                if (res.code == '10042') {
                    Toast.toast(res.msg);
                    this.props.changeSaveBabyStatus(false);
                } else {
                    Toast.toast(res.msg);
                }
            })
        })

    }

    /**
     * 壹教云跳转处理
     * 家校通跳转
     */
    getThirdParty(jxtBabyId, e) {
        if (!jxtBabyId) {
            if (this.DidMount) {
                Toast.toast('未获取到学生数据，请联系客服！');
                return
            }
            setTimeout(() => {
                this.getThirdParty()
            }, 200)
            return
        }
        let url = undefined
        if (e.currentTarget.className == 'kuaile')
            url = 'integral.html#/integral'
        localStorage.acindex = this.props.acindex
        goJxtFn(url, 3, '&userid=' + jxtBabyId, {
            babyid: this.props.babyid
        });
    };

    //离开页面
    leaveLocation(url) {
        localStorage.goback = 1;
        localStorage.acindex = this.props.acindex;
        if (url == 0)
            return
        delete sessionStorage.mapinit
        location.href = encodeURI(url)
    }

    //查询设备信息，更新state
    getBaby(id) {
        if (localStorage.appToken == undefined || localStorage.newlink || !id)
            return;
        HttpService.query({
            url: '/app/object/getBabyJxt',
            data: {
                token: localStorage.appToken,
                babyid: id
            },
            success: (res => {
                if (res.code == '10038') {
                    this.setState({
                        babyInfo: {
                            mdtid: res.data.mdtid,
                            telephone: res.data.telephone,
                            endTime: res.data.endtime,
                            babyname: res.data.babyname,
                            userid: res.data.userid,
                            isadmin: res.data.isadmin,
                            authstatus: res.data.authstatus,
                            loststatus: res.data.loststatus,
                            deviceType: res.data.deviceType,
                            headimg: res.data.headimg,
                            babytelephone: res.data.babytelephone,
                            babyid: res.data.babyid,
                            deviceid: res.data.deviceid,
                            jxtBabyId: res.data.jxtBabyId,
                            schoolname: res.data.schoolname
                        },
                        deviceType: res.data.deviceType
                    });
                    this.authstatusTip(res.data);
                    localStorage.adminTelephone = res.data.adminTelephone
                    localStorage.schoolName = res.data.schoolname
                    this.leaveLocation(0)
                    //获取积分开关
                    integralSwitch({
                        token: localStorage.appToken,
                        schoolName: localStorage.schoolName,
                        range: 2 //1 教师端 2家长端
                    }, function(status, data) {
                        if (status.toString() == localStorage.integral)
                            return
                        localStorage.integral = status
                        this.setState({
                            integral: status
                        })
                    }.bind(this))
                }
            })
        })
    }
    //认证提示判断
    authstatusTip(babyInfo, packageExpired) {
        if (babyInfo.deviceType == 2) {
            if (packageExpired != 1) {
                if (localStorage.authstatus && localStorage.authstatus.indexOf(babyInfo.babyid) > -1)
                    return 0;
            }
            if (localStorage.authstatus == undefined)
                localStorage.authstatus = '';
            if (babyInfo.isadmin == true) {
                localStorage.is = 1;
                localStorage.authstatus += babyInfo.babyid + ',';
                if (babyInfo.tianyin == true && babyInfo.authstatus != 3) {
                    this.setState({
                        model: Tool.assign({}, this.state.model, {
                            flag4: true
                        })
                    })
                    return 1;
                }
                if (babyInfo.authstatus == 0) {
                    this.setState({
                        model: Tool.assign({}, this.state.model, {
                            flag: true
                        })
                    });
                    return 1;
                } else if (babyInfo.authstatus == 1) {
                    this.setState({
                        model: Tool.assign({}, this.state.model, {
                            flag1: true
                        })
                    });
                    return 1;
                } else if (babyInfo.authstatus == 2) {
                    this.setState({
                        model: Tool.assign({}, this.state.model, {
                            flag2: true
                        })
                    });
                    return 1;
                }
            } else {
                if (babyInfo.authstatus == 0) {
                    localStorage.is = 1;
                    localStorage.authstatus += babyInfo.babyid + ',';
                    this.setState({
                        model: Tool.assign({}, this.state.model, {
                            flag3: true
                        })
                    });
                    return 1;
                }
            }
        }
    }
    // integral(status) {
    //     this.setState({
    //         integral: status
    //     })
    // }

    //页面加载中
    componentWillMount() {
        if (localStorage.setDevice == 1) {
            this.props.getOneBabyid(this.props.acindex);
            localStorage.setDevice = 0;
        }
        if (this.props.params.userid == undefined && this.props.babyid == '') {
            localStorage.appToken = this.props.params.token;
            this.props.getOneBabyid();
            return;
        }
        if (localStorage.delDevice == 1 || localStorage.goback == 1) {
            this.props.getOneBabyid();
            localStorage.goback = 0;
            localStorage.delDevice = 0;
        }
    }
    //页面关闭时
    componentWillUnmount() {
        // if (this.props.exportMap.length != 0)
        //     this.props.exportMap.clearMap()
        var node = document.getElementById('container');
        if (!!node) {
            node.parentNode.removeChild(node);
        }
        delete sessionStorage.mapinit
    }
    //页面完毕时
    componentDidMount() {
        //遍历页面底部按钮--添加百度统计点击事件
        var mapList = document.querySelectorAll('.option');
        for (var i = 0; i < mapList.length; i++) {
            mapList[i].onclick = function() {
                _hmt.push(['_trackEvent', 'page', 'map', this.innerText]);
            }
        }
        //历史轨迹按钮--添加百度统计点击事件
        if (document.querySelector('.app-kuiji'))
            document.querySelector('.app-kuiji').onclick = function() {
                _hmt.push(['_trackEvent', 'page', 'map', '历史轨迹']);
            };
        this.DidMount = true;
        if (!this.state.babyInfo.babyid)
            this.getBaby(localStorage.babyid);
        sessionStorage.mapinit = 1
    }
    //页面state更新时
    componentWillReceiveProps(nextProps, nextState) {
        if (this.state.isReceiveProps && localStorage.delDevice != 1)
            return;
        this.setState({
            isReceiveProps: true
        });
    }

    render() {
        const getCurrenttime = GetCurrentDate.time();
        const {
            babyInfo,
            confrmtatus,
            isOpen,
            mapHeight,
            mapBottom,
            integral,
            checked
        } = this.state;
        let {
            babyname,
            babytelephone,
            list,
            authstatus,
            loststatus,
            headimg,
            values,
            lng,
            lat,
            gpstime,
            getGuardiansList,
            _checked,
            relationList,
            address,
            isLogin,
            datasource,
            babyid,
            acindex,
            deviceType,
            deviceid,
            jxtBabyId
        } = this.props;
        let timeposi = false
        if (gpstime) {
            gpstime = gpstime.replace(/\-/g, '/')
            let timediff = new Date().getTime() - new Date(gpstime).getTime()
            if (timediff / 1000 / 60 / 10 > 1)
                timeposi = true
            if (new Date().getFullYear() == new Date(gpstime).getFullYear())
                gpstime = gpstime.substr(5)
            gpstime = gpstime.slice(0, -3).replace(/\//g, '.')
        }
        let valueType = () => {
            if (deviceType == 3)
                return;
            if (values == '0') {
                return <img src={dian} className='dianchi'/>
            } else if (values == '1') {
                return <img src={dian1} className='dianchi'/>
            } else if (values == '2') {
                return <img src={dian2} className='dianchi'/>
            } else if (values == '3') {
                return <img src={dian3} className='dianchi'/>
            } else if (values == '4') {
                return <img src={dian4} className='dianchi'/>
            }
        };
        let sigledev = 0
        let sigleindex = 0
        let visiIndex = acindex
        let listItem = list.map((json, index) => {
            if (json.deviceType == 2) {
                sigleindex = index
                sigledev++;
            }
            if (localStorage.newlink && localStorage.acindex)
                visiIndex = localStorage.acindex
            return (
                <div className={index==visiIndex?`devactive device-info divtype${json.deviceType}`:`device-info divtype${json.deviceType}`} key={index} onClick={this._change.bind(this, json.babyname, json.babyid, json.jxtBabyId,json.deviceid,json.deviceType, json.authstatus,json.loststatus, json.headimg, json.babytelephone,index)}>
                    <div className="headimg">
                        <div className='relative'>
                            {!json.headimg
                                ? <img src={touxiang}/>
                                : <img src={"/media" + json.headimg} onError={imgOnError.bind(this,touxiang)} />}
                                {json.loststatus==1?<div className='guashi'><img src={imgGuaShi} onError={imgOnError.bind(this,touxiang)} /></div>:null}
                        </div>
                    </div>
                    <div className="info">
                        <div className="name">{json.babyname}</div>
                        {json.deviceType == 3||!json.endtime?null:<div className="time">设备套餐有效期：{json.endtime.replace(/\-/g, '.')}</div>}
                    </div>
                </div>
            )
        });
        if (localStorage.newlink && sigledev == 1) { //只有一个智能学生证//直接跳转处理
            localStorage.acindex = 0
            this.context.router.push(`/pay/${list[sigleindex].babyid}/${list[sigleindex].deviceid}/true`)
        }
        const {
            model
        } = this.state;
        return (
            <div style={isIphone4()==true?(checked==true?{overflow: 'hidden',background:'#eee',height:'100vh',position:'relative'}:{background:'#eee',height:'100vh',position:'relative'}):{background:'#eee',height:'100vh'}}>
                {
                    checked==true||(localStorage.newlink && sigledev!=0&&sigledev != 1)?
                 <div id='delistbox'>
                    <div className="_z"></div>
                    <div className="layer_content">
                        <div className="header">
                            <div className="left"></div>
                            <div className="title">{localStorage.newlink?'选择缴费的设备':'我的设备'}</div>
                            <div className="guanbi">
                                {localStorage.newlink?'':<img src={guanbi} style={{width: '2.2rem'}} onClick={this.closedevList.bind(this)}/>}
                            </div>
                        </div>
                        <div className={localStorage.newlink?'layer_content2 laynewlinks':'layer_content2'}>
                            {listItem}
                        </div>
                    </div>
                </div>:''}
                <Model modelConfig={this.modelConfigBabyNone} flag={_checked}/>
                {localStorage.newlink?'':
                    <div>
                        <Model modelConfig={this.modelConfigBabyState0} flag={model.flag}/>
                        <Model modelConfig={this.modelConfigBabyState2} flag={model.flag2}/>
                        <Model modelConfig={this.modelConfigBabyState1} flag={model.flag1}/>
                        <Model modelConfig={this.modelConfigBabyState3} flag={model.flag3}/>
                        <Model modelConfig={this.modelConfigBabyState4} flag={model.flag4}/>
                    </div>
                }
                <div className={isIphone4()==true?'maptipsmin iphone4':'maptipsmin'} id='maptipsmin' style={{height:deviceType == 3?'100%':'auto'}}>
                    {localStorage.newlink?'':<News length='1' jxtBabyId={jxtBabyId}  />}
    				{deviceType == 3&&!localStorage.newlink
                        ? <div className='maptips clearfix'>
                            <img className='kan' src={imgKan}/>
                            <div className='word'>当前设备仅支持一般考勤功能<br/>升级后即可掌握孩子实时位置</div>
                            <div>
                                <Link to='/Shengji/liaojie' className='tolook'>了解智能学生证 >></Link>
                            </div>
                        </div>
                        :
                        ''}
                </div>

                {!!relationList
                    ? <div>
                            <div className="_zz"></div>
                            <div className="layer_content3">
                                <div className="header">
                                    <div className="title">选择成员关系</div>
                                </div>
                                <div className="layer_content4">
                                    {getGuardiansList.map((json, index) => {
                                        return <div className="row" key={index} onClick={this.changeAge.bind(this, json.familystatus)}>
                                            <div className="left">
                                                {json.check == true
                                                    ? <img src={json.img1}/>
                                                    : <img src={json.img}/>
}
                                            </div>
                                            <div className="right">
                                                {json.title != '家庭'
                                                    ? <div className="one">我是{json.familystatus}</div>
                                                    : <div className="one">{json.familystatus}</div>
}
                                                <div className="two">{json.ds}</div>
                                            </div>
                                        </div>
                                    })
}
                                </div>
                            </div>
                        </div>
                    : null
}
{localStorage.newlink?'':
                <div className="box">
                    <Link className="box1" to={'/baby/'+babyid}>
                        {!headimg
                            ? <img src={touxiang} style={{
                                    width: '3.4rem',
                                    height: '3.4rem'
                                }}/>
                            : <img src={"/media" + headimg} onError={imgOnError.bind(this,touxiang)}  style={{
                                width: '3.4rem',
                                height: '3.4rem'
                            }}/>
}
{loststatus==1?<div className='guashi'><img src={imgGuaShi} /></div>:null}

                    </Link>
                    <Link className="box2" to={'/baby/'+babyid}>
                        <div className="babyname">
                            <span className="row1">{babyname}</span>
                            {deviceType == 3||!deviceid||!address
                                ? ''
                                : <span className="row2">&nbsp;&nbsp;{timeposi == true?<b className='timeposi'>设备定位未更新</b>:'设备当前定位'}&nbsp;</span>}
    {valueType()}
                            {deviceType == 2
                                ? datasource == 1
                                    ? <img src={gbs} />
                                    : datasource == 2
                                        ? <img src={wifi} />
                                        : datasource == 3
                                            ? <img src={lbs} />
                                            : ''
                                : ''}


                        </div>
                        <div className="address">
                            <div className="ss">
                                {deviceType == 2
                                    ? !gpstime
                                        ? <span>{/*getCurrenttime + ' '*/}</span>
                                        : timeposi == true?`定位时间：${gpstime} `:`${gpstime} `
                                    : ''
}
                                {!address
                                    ? <span>{deviceType == 3
                                                ? <span style={{
                                                        color: '#999'
                                                    }}>当前设备不支持实时定位</span>
                                                : '未获取到当前设备定位!'}</span>
                                    : <span>
                                        {address}</span>
}
                            </div>
                        </div>
                    </Link>
                    {list.length>1?
                    <div className="box3" onClick={this.getdevList.bind(this)}>
                        <img src={qiehuan} style={{
                            width: '2.2rem'
                        }}/>
                </div>:''}
                </div>}
                {deviceType == 2&&!localStorage.newlink?
                <div className="app-kuiji">
                    <div onClick={this.packageExpired.bind(this, 'guiji', '/path/' + babyid + '/' + lng + '/' + lat)}>
                        <img src={lishiguiji} style={{
                            width: '2.8rem'
                        }}/>
                    </div>
                </div>:''}
                {<div id="container"></div>}
                {confrmtatus == 1
                    ? <div id='overtime'>
                            <div className="none">
                                <div className="popup_zindex"></div>
                                <div className="popup_content">
                                    <div className="header">
                                        <div className="popup_title" style={{
                                            color: '#ff1a1a'
                                        }}>{this.confrmtatusTxt==1?'过期提醒':'温馨提示'}</div>
                                    </div>
                                    {this.confrmtatusTxt==2?
                                        <div className="popup_content2" style={{
                                            display: 'block'
                                        }}>
                                        当前孩子未绑定设备，无法使用此功能，{babyInfo.isadmin?'请绑定设备后使用':'请联系设备管理员绑定设备'}。
                                    </div>:null}

                                    {this.confrmtatusTxt==1?<div className="popup_content2" style={{
                                        display: 'block'
                                    }}>您的设备套餐已于{babyInfo.endTime}过期，请您缴费后，联系客服更换sim卡，以便正常使用，联系电话：<a style={{color: 'inherit'}} href='tel:4008273366'>400-827-3366</a>
                </div>:null}
                                    {this.confrmtatusTxt==3?<div className="popup_content2" style={{
                                        display: 'block'
                                    }}>
                                    当前设备已挂失，无法使用此功能，请联系管理员进行解除挂失。
                                </div>:null}
                                    <div className="foot">
                                        <div className="btn cancel_btn" style={{
                                            color: '#666'
                                        }} onClick={this.closeTime.bind(this)}>知道了</div>
                                    {(this.confrmtatusTxt==1&&babyInfo.loststatus!=1) ||(this.confrmtatusTxt==2&&babyInfo.isadmin)?
                                    <Link className="btn sure_btn" to={this.confrmtatusTxt==1?`/pay/${babyInfo.babyid}/${babyInfo.deviceid}`:'/addDevice/1'}>{this.confrmtatusTxt==1?'去缴费':'去绑定'}</Link>:null}
                                    </div>
                                </div>
                            </div>
                        </div>
                    : ''}
                    {localStorage.newlink?'':
                <div className={isIphone4()==true?"menu menumap iphone4":"menu menumap"}>
                    <div className="option" onClick={this.packageExpired.bind(this, '/shengji/dingwei', 'getLocation')}>
                        <div>
                            <img src={dingwei}/>
                            <div>实时定位</div>
                        </div>
                    </div>
                    <div className="option">
                        <a href={"tel:" + babytelephone} onClick={this.packageExpired.bind(this, '/shengji/tonghua', 'tel')}>
                            <img src={tonghua}/>
                            <div>亲情通话</div>
                        </a>
                    </div>
                    <div className="option">
                        <div onClick={this.packageExpired.bind(this, 'Kaoqin', '/Kaoqin/' + babyid)}>
                            <img src={kaoqin}/>
                            <div>考勤</div>
                        </div>
                    </div>
                    <div className="option" onClick={this.getThirdParty.bind(this,jxtBabyId)}>
                        <div>
                            <img src={banji}/>
                            <div>家校通</div>
                        </div>
                    </div>
                    {/*<div className="option">
                        <div onClick={this.packageExpired.bind(this, '/shengji/anquan', '/Safetyarea/' + babyid)}>
                            <img src={anquan}/>
                            <div>安全区域</div>
                        </div>
                    </div>
                    <div className="option">
                        <Link to={'/Guardian/' + babyid+'/'+deviceType+'/'+deviceid}>
                            <img src={tongzhi}/>
                            <div>成员管理</div>
                        </Link>
                    </div>*/}

                    <div className="option">
                        <div onClick={this.leaveLocation.bind(this,`${goJxtUrl}/jiaxiaotong#/info?wherefrom=weixin&appType=1&appToken=${localStorage.appToken}&babyid=${babyid}&userphone=${localStorage.userphone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}&orgname=${encodeURIComponent(babyInfo.schoolname)}`)}>
                            <img src={zixun}/>
                            <div>资讯</div>
                        </div>
                    </div>
                    <div className="option">
                        {integral?
                        <div onClick={this.getThirdParty.bind(this,jxtBabyId)} className='kuaile'>
                            <img src={kuaile}/>
                            <div>快乐城堡</div>
                        </div>:
                        <div onClick={this.packageExpired.bind(this, '/shengji/anquan', '/Safetyarea/' + babyid)}>
                            <img src={anquan}/>
                            <div>安全区域</div>
                        </div>
                        }
                    </div>
                    <div className="option" onClick={this.appDown.bind(this)}>
                        <Link className='relative'>
                            <img src={downa}/>
                            <div>下载APP</div>
                            {localStorage.appdown == 1
                                ? ''
                                : <div className='downapp'>
                                    <div className='newfn' style={{
                                        marginLeft: '3rem'
                                    }}></div>
                                </div>}
                        </Link>
                    </div>
                    <div className="option">
                        <Link to={'/More/' + babyid+'/'+integral}>
                            <img src={more}/>
                            <div>更多</div>
                        </Link>
                    </div>
                </div>}
            </div>
        )
    }

}

const mapStateToProps = state => {
    return {
        list: state.login.list,
        babyname: state.login.babyname,
        babyid: state.login.babyid,
        jxtBabyId: state.login.jxtBabyId,
        authstatus: state.login.authstatus,
        loststatus: state.login.loststatus,
        babytelephone: state.login.babytelephone,
        deviceid: state.login.deviceid,
        headimg: state.login.headimg,
        values: state.login.values,
        lng: state.login.lng,
        lat: state.login.lat,
        gpstime: state.login.gpstime,
        getGuardiansList: state.login.getGuardiansList,
        _checked: state.login.checked,
        relationList: state.login.relationList,
        address: state.login.addr,
        datasource: state.login.datasource,
        isLogin: state.login.isLogin,
        exportMap: state.login.exportMap,
        deviceType: state.login.deviceType,
        acindex: state.login.acindex
    };
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        change: change,
        getOneBabyid: getOneBabyid,
        changeSaveBabyStatus: changeSaveBabyStatus,
        getCurrentPower: getCurrentPower,
        exportMap: exportMap
    }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(MapIndex);
